<!-- 学生成绩管理-->
<template>
  <div class="contenBox">
    <div class="leftTree">
      <el-tree
        :data="treeData"
        :highlight-current="true"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="rightContent">
      <div class="rightTop">
        <el-card class="box-card">
          <el-form :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input
                v-model="formSearch.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="学号">
              <el-input
                v-model="formSearch.studentId"
                placeholder="请输入学号"
              ></el-input>
            </el-form-item>
            <el-form-item label="学年">
              <el-select
                v-model="formSearch.schoolYear"
                placeholder="请输入学年"
              >
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.schoolYearName"
                  :value="item.schoolYearName"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="创建时间">
              <el-date-picker
                v-model="formSearch.createTime"
                align="center"
                type="date"
                placeholder="请选择时间"
                @focus="selectDate"
                @blur="closeSelect"
              >
              </el-date-picker>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" size="small" @click="search">
                <span
                  class="icon iconfont icon-chaxun"
                  style="font-size: 12px; font-weight: bold"
                  >查询</span
                >
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="reset"
                icon="el-icon-refresh"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <div class="rightBottom">
        <el-card class="box-card">
          <div class="box_btn">
            <el-button type="primary" size="mini" @click="goentergrades">录入</el-button>
            <!-- <el-button type="primary" size="mini">导入</el-button> -->
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="sex" label="性别">
              <template slot-scope="scope">
                <span>{{ scope.row.sex == 0 ? "男" : "女" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="schoolYear" label="学年学期">
            </el-table-column>
            <el-table-column prop="college" label="学院"> </el-table-column>
            <el-table-column prop="major" label="专业"> </el-table-column>
            <el-table-column prop="classes" label="班级"> </el-table-column>
            <el-table-column label="操作" width="110">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editScore(scope.row.id)" v-show="scope.row.releaseStatus == 1 ? false : true">编辑</el-button>
                <el-button type="text" size="small" @click="release(scope.row)">{{scope.row.releaseStatus == 1 ? '已发布' : '发布'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[5,10,15,20,25]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
// import { colleageTreeDataApi } from "@/api/basics/college.js";
import {getSchoolYearApi} from "@/api/educational/schoolYear"
import {
  leftTreeListApi
} from "@/api/graduation/thegraduate.js"
// import { getClassifyTreeListApi } from "@/api/basics/classify";
import { getStudentList , releaseStudentApi} from "@/api/achievement/student";
export default {
  data() {
    return {
      // 左侧树模拟数据
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      //搜索框数据
      formSearch: {
        name: "",
        studentId: "",
        schoolYear: "",
      },
      option: [],
      //表格数据
      tableData: [],
      //分页
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0, //总条数,
      queryInfo: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.getList();
    this.upDateTree();
    getSchoolYearApi().then(res=>{
      console.log(res,'----xuenian ')
      this.option = res.rows
    })
  },
  methods: {
    getList() {
      var params = {
        pageNum:1,
        pageSize:10,
        releaseStatus:1
      }
      console.log(params);
      getStudentList(this.queryInfo).then(res => {
        console.log(res, "列表数据");
        this.tableData = res.rows;
        this.total = res.total;
      });
      
    },
    upDateTree() {
      leftTreeListApi()
        .then(res => {
          // this.treeData = res.data;
          if(res.code === 200) {
            console.log(res);
            this.treeData = res.data
            res.data.forEach(item=>{
              console.log(item);
              if(item.children && item.children.length > 0) {
                console.log(item);
              // console.log(item,'-----shu');
                item.children.forEach(ite=>{
                  ite.label = ite.majorName
                  if(ite.children.length > 0) {
                    ite.children.forEach(it=>{
                      it.label = it.className
                    })
                  }
                })
              }
            })
          }
        })
        .catch(() => {});
    },
    //点击左侧树的事件
    handleNodeClick(data) {
      console.log(data);
      if(data.id) {
        this.leftTreeColleageId = data.label
        getStudentList({college:data.label}).then(res=>{
          this.tableData = res.rows;
          this.total = res.total;
        })
        console.log(22222);
        let obj = {
          college:data.label,
        }
        sessionStorage.setItem("obj",JSON.stringify(obj))
      }else if(data.majorId && data.colleageId && !data.classId){
        console.log(2222);
        this.leftTreeMajorId = data.majorName
        this.leftTreeColleageId = data.colleageName
        getStudentList({major:data.majorName}).then(res=>{
          this.tableData = res.rows;
          this.total = res.total;
        })
        let obj = {
          college:data.colleageName,
          majorName:data.majorName
        }
        sessionStorage.setItem("obj",JSON.stringify(obj))

      }else if(data.classId && data.majorId && data.colleageId){
        this.leftTreeClassId = data.classId
        this.leftTreeMajorId = data.majorId
        this.leftTreeColleageId = data.colleageId
        getStudentList({classes:data.className}).then(res=>{
          this.tableData = res.rows;
          this.total = res.total;
        })
        let obj = {
          college:data.colleageName,
          majorName:data.majorName,
          classes:data.className
        }
        sessionStorage.setItem("obj",JSON.stringify(obj))

      }
      // console.log(data);
      // let obj = {
      //   pageNum:1,
      //   pageSize:10,
      //   id:data.id
      // }
      // getStudentList(obj).then(res => {
      //   console.log(res, "点击左侧树的列表数据");
      // });
    },
    //分页
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getList();
    },
    //搜索
    search() {
      getStudentList(this.formSearch).then(res => {
        console.log(res, "列表数据");
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    //重置
    reset() {
      this.formSearch = {};
      this.getList()
    },
    // 选择时间
    selectDate() {
      this.date = true;
    },
    // 取消选择时间
    closeSelect() {
      this.date = false;
    },
    goentergrades() {
      this.$router.push({
        path: `/Achievement/Entergrades`
      });
    },
    //编辑
    editScore(id) {
      this.$router.push({
        path: `/Achievement/Editstudentscore/${id}`
      });
    },
    //发布
    release(row) {
      console.log(row);
      if(row.releaseStatus == '0') {
          this.$confirm(
          "是否发布，发布之后无法修改",
          "确认信息",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "发布",
            cancelButtonText: "取消"
          }
        )
          .then(() => {
            releaseStudentApi({id:row.id}).then(res=>{
              console.log(res);
              if(res.code == 200){
                this.$message.success('发布成功')
                this.getList()
              }
            })
          })
          .catch(action => {
            this.$message({
              type: "info",
              message:
                action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面"
            });
          });
      }else {
        // this.$message.success('该信息已发布')
        this.$confirm(
          "该信息已发布",
          "确认信息",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消"
          }
        )
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 20px 20px 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    ::v-deep .el-tree {
      width: 250px;
    }
    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }
  }

  .rightContent {
    flex: 1;
    min-width: calc(100vh - 250px);
    margin-left: 15px;
    padding-right: 10px;
    border-radius: 5px;
    box-sizing: border-box;

    .rightTop {
      width: 100%;
      .el-card {
        height: 100%;
        .el-select {
          width: 220px;
        }
      }
    }

    .rightBottom {
      margin-top: 20px;
      box-sizing: border-box;
      .el-table {
        margin-top: 20px;
      }
      .edit {
        cursor: pointer;
        margin-right: 15px;
      }
      .del {
        cursor: pointer;
      }

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;
        }

        ::v-deep .btn-prev,
        ::v-deep .btn-next,
        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }
    }
  }
}
</style>

